<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>猪客</title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/style.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/map_main.css" />
	</head>

	<body onload="init()">
		<div class="detail-title">
			<a href="close" class="mui-pull-left"><span class="mui-icon mui-icon-arrowleft"></span></a>
			<a href="share" class="mui-pull-right"><span class="iconfont icon-share mui-text-right mui-pull-right"></span></a>
		</div>
		<div class="mui-content" data-type="details">
			<div id="slider" class="mui-slider">
				<div id='banner_imgs' class="mui-slider-group mui-slider-loop" style="max-height: 288px;">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="http://zkh5.zhukezhijia.com/image#/id/04">
							<img src="">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item hidden">
						<a href="#">
							<img src="">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="http://zkh5.zhukezhijia.com/image#/id/01">
							<img src="">
						</a>
					</div>
				</div>
				<!--banner节点-->
				<!-- <div id='banner_indicator' class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div> -->
				<div id='banner_pages' class="mui-slider-indicator page-num">
					<p><span id='page_now'>1</span>/<span id='page_num'>1</span></p>
				</div>
			</div>
		</div>
		<div class="back-fff padding-line44 description" style="padding-bottom: 0 !important;">
			<h5 class="font-color-3 font14 margin-t10 housename"></h5>
			<ul class="hidden margin-t20 border-t border-be padding-t10 padding-b10 font-color-9">
				<li class="mui-col-xs-4 mui-pull-left mui-text-left border-r">
					<h4 class="no-font-weight font10">租金</h4>
					<p class="font14 margin-t5 color-orange houseprice"></p>
				</li>
				<li class="mui-col-xs-4 mui-pull-left mui-text-left border-l border-r padding-l10">
					<h4 class="no-font-weight font10">户型</h4>
					<p class="font14 margin-t5 color-orange  housetype"></p>
				</li>
				<li class="mui-col-xs-4 mui-pull-left mui-text-left padding-l10">
					<h4 class="no-font-weight font10">面积</h4>
					<p class="font14 margin-t5 color-orange  housesize"></p>
				</li>
			</ul>
			<div class="font-color-9">
				<p class="margin-t10"><span class="padding-r20 font12">方式</span><em class="font-color-3 font12 housedeposit"></em></p>
				<p class="margin-t10"><span class="padding-r20 font12">朝向</span><em class="font-color-3 font12 housetoward"></em></p>
				<p class="margin-t10"><span class="padding-r20 font12">楼层</span><em class="font-color-3 font12 housefloor"></em></p>
			</div>
			<ul class="margin-t10 border-t border-be font-color-9 padding-b10 padding-t10">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right font10 color-orange npd iconright padding-r10 Not-hide"><span class="back-orange radius4 font10 color-white margin-r10" style="padding: 2px;">信用租</span>芝麻分满700分即可免押金入住，点击立即获取福利</a>
				</li>
			</ul>
		</div>
		<ul class="mui-table-view back-fff margin-t10 not-border">
			<li class="mui-table-view-cell padding-line44 not-border mui-collapse back-fff">
				<a class="mui-navigate-right font14 padding-r10 icon-r-orange">房间设施<span class="color-orange mui-pull-right margin-r20 font10">查看更多</span></a>
				<div class="mui-collapse-content property">
					<ul class="hidden border-list facilityicon">
					</ul>
				</div>
				<div class="property">
					<ul class="hidden border-list border-list-none facilityicon">
					</ul>
				</div>
			</li>
		</ul>
		<div class="back-fff margin-t10">
			<div class="mui-table-view-cell padding-line44 not-border">
				<p class="font14 font-color-3">地理位置</p>
				<p class="font12 padding-r10 margin-t5 icon-r-orange houseaddress"></p>
				<div class="map margin-t5">
					<a href="#" class="linkmap"></a>
					<div id="mapContainer"></div>
				</div>
			</div>
		</div>
		<div class="back-fff margin-t10" style="margin-bottom: 0.75rem;">
			<div class="mui-table-view-cell not-border" style="padding-right: 0;">
				<p class="font14 font-color-3">附近相似房源</p>
				<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted Left-and-right margin-t10">
					<div class="mui-scroll" style="top: 0;">
						<ul class="Similarhouse">
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="hidden back-fff buy-now border-t">
			<div class="mui-pull-left left-icon">
				<ul class="hidden fixed-list">
					<li class="mui-pull-left mui-text-center" id="Collection">
						<span class="iconfont icon-aixin font24"></span>
						<p class="font10">收藏</p>
					</li>
					<li class="mui-pull-left mui-text-center">
						<span class="iconfont icon-dianhua font24"></span>
						<p class="font10">咨询</p>
					</li>
				</ul>
			</div>
			<div class="mui-pull-right right-btn">
				<button class="mui-pull-right cart-btn-button color-white nborder font14 back-blue">预约看房</button>
				<button class="mui-pull-right buy-now-button color-white nborder font14 back-orange">我要预定</button>
			</div>
		</div>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../../js/base.js"></script>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=792445ea58b360f2a3029f214133b052&plugin=AMap.ToolBar"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var gallery;
			setTimeout(function() {
				gallery = mui('.mui-slider');
				gallery.slider({
					interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
				});
			}, 300)
			
			/* 轮播图的数字 */
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			  $('#page_now').html(event.detail.slideNumber+1);
			});
			
			function init() {
				map = new AMap.Map("mapContainer", {
					zoom: 13,
					center: [118.1825280190, 24.4831258038]
				});
				marker = new AMap.Marker({
					map: map,
					position: [118.1825280190, 24.4831258038],
				})

				var loc_house_id = getUrlParam('houseId');
				$.ajax({
					type: 'POST',
					url: wanqi_api.showDetails,
					data: {
						houseId: loc_house_id
					},
					dataType: 'json',
					success: function(data) {
						//打印传递过来的数据到控制台
						console.log(data);

						/* 如果回传数据正确 */
						if(data['errorCode'] == '') {
							var house_html = '';
							var region = data['result']['region']; //所在区域
							var title = data['result']['title'];//名称
							var price = data['result']['price']; //价格
							var room = data['result']['room']; //室
							var hall = data['result']['hall']; //厅
							var toilet = data['result']['toilet']; //卫
							var area = data['result']['area']; //面积
							var floor = data['result']['floor']; //第几层
							var total_floor = data['result']['total_floor'];//总楼层 
							var address = data['result']['address']; //地址
							$('.housename').html('<span>' + region + '</span> · <span>' + title + '</span>');
							$('.houseprice').html('<span>' + price + '元/月</span>');
							$('.housetype').html('<span>' + room +'室' + hall +'厅' + toilet +'卫</span>');
							$('.housesize').html('<span>' + area + 'm²</span>');
							$('.housefloor').html('<s>' + floor +'</s><s>/</s><s>' + total_floor +'</s><s>楼</s>');
							$('.houseaddress').html('<span class="iconfont icon-ditu margin-r5 font14"></span><em>' + address + 'm²</em>');

							var deposit = data['result']['deposit']; //押金方式
//							console.log(toward)
							deposit = deposit * 1;
							var depositName = '';
							switch(deposit) {
								case 1:
									depositName = "押一付三";
									break;
								default:
									depositName = "押一付一";
							}
							$('.housedeposit').html('<s>' + depositName + '</s>');
							
							var toward = data['result']['toward']; //朝向
//							console.log(toward)
							toward = toward * 1;
							var towardName = '';
							switch(toward) {
								case 1:
									towardName = "东";
									break;
								case 2:
									towardName = "南";
									break;
								case 3:
									towardName = "西";
									break;
								case 4:
									towardName = "北";
									break;
								case 5:
									towardName = "东南";
									break;
								case 6:
									towardName = "西南";
									break;
								case 7:
									towardName = "西北";
									break;
								case 8:
									towardName = "东北";
									break;
								default:
									towardName = "无朝向";
							}
							$('.housetoward').html("<s>" + towardName + "</s>");
							
							var deposit = data['result']['deposit']; //押金模式
							/* 房间设施 */
							var facility_html = '';
							/* 获得房间设施数据 */
							var config_arr = data['result']['config_arr']; // data['result']['']
							/* 循环数组数据 */
							config_arr.forEach(function(value, index, array) { //  index,value 数组键值对,array 数组
								facility_html += '<li class="mui-col-xs-20 mui-text-center">';
								facility_html += '<img src="' + value.icon + '" />';
								facility_html += '<p class="margin-t10">' + value.name + '</p>';
								facility_html += '</li>';
							});
							/* HTML 替换 */
							$('.facilityicon').empty(); //清空 $('#facility') 内容
							$('.facilityicon').append(facility_html); // 追加 $('#facility') 内容

							
							/* 相似房源 */
							var Similarhouse_html = '';
							/* 获得相似房源数据 */
							var nearby = data['result']['nearby']; // data['result']['']
							/* 循环数组数据 */
							nearby.forEach(function(value, index, array) { //  index,value 数组键值对,array 数组
								Similarhouse_html += '<li class="mui-slider-item">';
								Similarhouse_html += '<div class="Tips-box"><a href="detail.html?houseId=' + value.id +'">';
								Similarhouse_html += '<img width="100%" src="' + value.cover_image + '" />';
								Similarhouse_html += '<div class="Tips">';
								Similarhouse_html += '<p class="mui-pull-left textover mui-col-xs-7 mui-text-left color-white">' + value.title + '</p>';
								Similarhouse_html += '<p class="mui-pull-right mui-col-xs-5 mui-text-right color-white">' + value.room +'室' + value.hall +'厅' + value.toilet +'卫</p>';
								Similarhouse_html += '</div>';
								Similarhouse_html += '</a></div>';
								Similarhouse_html += '<p class="color-orange font14 mui-text-left margin-t5">￥' + value.price + '元/月</p>';
								Similarhouse_html += '</li>';
							});
							/* HTML 替换 */
							$('.Similarhouse').empty(); //清空 $('#Similarhouse') 内容
							$('.Similarhouse').append(Similarhouse_html); // 追加 $('#Similarhouse') 内容
							
							
							/* 轮播图  */
							var banner_html = '';
							var images_arr = data['result']['images_arr'];
							var valid_img_length = images_arr.length;
							var first_images = '';
							var last_images = '';
							var n=0;
							images_arr.forEach(function (value,index){
								if(value != ''){
									banner_html += '<div class="mui-slider-item hidden"><a href="#">';
									banner_html += '<img src="'+ value +'">';
									banner_html += '</a></div>';
									n++;
								}
								/* 首张图片 */
								if(index == 0){
									first_images = value;
								}
								/* 最后一张 */
								if(index == valid_img_length-1){	// important! 图片数组最后一个数据为空串,需确认
									last_images = value;
								}
							});
							
							/* 额外增加的节点 - 循环轮播：第一个节点是最后一张轮播 */
							var first_banner_html = '';
							first_banner_html += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="#">';
							first_banner_html += '<img src="'+last_images+'">';
							first_banner_html += '</a></div>';
							
							/* 额外增加的节点 - 循环轮播：最后一个节点是第一张轮播 */
							banner_html += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="#">';
							banner_html += '<img src="'+first_images+'">';
							banner_html += '</a></div>';
							banner_html = first_banner_html + banner_html;

							/* HTML 替换 */
							$('#banner_imgs').empty(); //清空 $('#banner_imgs') 内容
							$('#banner_imgs').append(banner_html); // 追加 $('#banner_imgs') 内容
							
							/* 轮播下方光点 */
							var banner_indicator = '';
							for(var i=0;i<n;i++){
								banner_indicator += "<div class='mui-indicator";
								if(i == 0){
									banner_indicator += "mui-active";
								}
								banner_indicator += "'></div>";
							}
							if(n == 1){
								gallery.slider({
									interval: 0 //自动轮播周期，若为0则不自动播放，默认为0；
								});
							}
							/* HTML 替换 */
							$('.banner_indicator').empty(); //清空 $('#banner_indicator') 内容
							// $('.banner_indicator').append(banner_indicator); // 追加 $('#banner_indicator') 内容
							/* 轮播总页数 */
							$('#page_now').html(1);
							$('#page_num').html(n);
							/* 轮播图 end */
							
													
						}
					}
				});
			}

			$('#Collection span').click(function() {
			    if($(this).hasClass('icon-aixin1')) {
			        $(this).removeClass('icon-aixin1').addClass('icon-aixin');
//			        return false;
			    } else {
			        $(this).addClass('icon-aixin1').removeClass("icon-aixin");
//			        return false;
			    }
			});
			
			$(function (){
				
			});
		</script>
	</body>

</html>